import React from 'react';
import {connect} from 'dva';
import {
    Form,
    Input,
    InputNumber,
    Select,
    message,
    Button
} from 'antd';
import { insertServiceType, updateServiceType, selectChargeType } from '../../services/api'
const FormItem = Form.Item;
const Option = Select.Option;

class FormInfo extends React.Component {

    state= {
        detail: {},
        chargeType: [],
        fromDisabled: false
    }

	componentDidMount() {
        this.selectChargeType();
        if(this.props.optionType === 'detail') {
            this.setState({fromDisabled: true});
        }
        if(this.props.data) {
            this.setState({detail: this.props.data})
            return;
        }
    }

    async selectChargeType() {
        let res = await selectChargeType();
        if(res.code === 200) {
            this.setState({chargeType: res.data})
        }
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, fieldsValue) => {
            if (!err) {
                if (this.props.optionType === 'insert') {
                    this.insertServiceType(fieldsValue);
                } else {
                    this.updateServiceType(fieldsValue);
                }
                return;
            }
        });
    }

    /**
     * 修改服务类型
     */
    async updateServiceType(fieldsValue) {
        fieldsValue.fId = this.props.data.fId;
        let res = await updateServiceType(fieldsValue);
        if(res.code === 200) {
             message.success('修改成功');
            this.props.dispatch({type: 'example/setServiceType', res: !this.props.serviceType })
            this.cancel();
        }else {
            res.msg && message.error(res.msg);
        }
    }

    /**
     * 添加服务类型
     */
    async insertServiceType(fieldsValue) {
        let res = await insertServiceType(fieldsValue);
        if(res.code === 200) {
            message.success('新增成功');
            this.props.dispatch({type: 'example/setServiceType', res: !this.props.serviceType })
            this.cancel();
        }else {
            res.msg && message.error(res.msg);
        }
    }


    /**
     * 更改服务价格
     * @param {*} value 
     */
    changePrice(value) {
    }

    /**
     * 关闭模态框
    */
    cancel = () => {
        this.props.closeModal();
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        const formLayout = {
            labelCol: {
                span: 4
            },
            wrapperCol: {
                span: 20
            }
        }
        return (
            <Form layout={`horizontal`}>
                <FormItem label="服务名称" {...formLayout}>
                    {getFieldDecorator('fName', {
                        initialValue: this.state.detail.fName,
                        rules: [
                            {
                                required: true,
                                message: '请输入服务名称!'
                            }
                        ]
                    })(<Input disabled={this.state.fromDisabled} placeholder="请输入..."/>)}
                </FormItem>
                <FormItem label="服务描述" {...formLayout}>
                    {getFieldDecorator('fDesc', {
                        initialValue: this.state.detail.fDesc,
                    })(<Input disabled={this.state.fromDisabled} placeholder="请输入..."/>)}
                </FormItem>
                <FormItem label="收费类型" {...formLayout}>
                    {getFieldDecorator('fChargeType', {
                        initialValue: this.state.detail.fChargeType,
                        rules: [
                            {
                                required: true,
                                message: '请选择收费类型!'
                            }
                        ]
                    })(
                        <Select
                            placeholder="请选择..."
                            disabled={this.state.fromDisabled}
                            style={{
                            width: '100%'
                        }}>
                            {this.state.chargeType.map((item) => (
                                <Option value={item.chargeTypeId} key={item.chargeTypeId}>
                                    {item.chargeTypeContent}
                                </Option>
                            ))}
                        </Select>
                    )}
                </FormItem>
                <FormItem label="价格（元）" {...formLayout} style={{marginLeft:'12px'}}>
                    {getFieldDecorator('fPrice', {
                        initialValue: this.state.detail.fPrice,
                        rules: [
                            {
                                required: true,
                                message: '请输入价格!'
                            }
                        ]
                    })(<InputNumber disabled={this.state.fromDisabled} min={0} onChange={this.changePrice} placeholder="请输入..." style={{width:'100%'}}/>)}
                </FormItem>
                { !this.state.fromDisabled 
                ? <FormItem style={{
                    textAlign: 'right'
                }}>
                    <Button style={{
                        marginRight: 10
                    }} onClick={this.cancel}>取消</Button>
                    <Button type="primary" onClick={this.handleSubmit}>确定</Button>
                </FormItem>
                : null}
                
            </Form>
        );
    }
}
const NormalForm = Form.create()(FormInfo);

export default connect((state) => ({personalModal: state.example.personalModal, serviceType: state.example.serviceType}))(NormalForm)